<template>
  <div class="notice-container">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="initAjaxMethod"  error-text="请求失败，点击重新加载">
      <van-cell :value="item.createtime | dateFrom" v-for="(item,index) in listData" :key="index" @click="$router.push({path:'/perOffice/noticeDetail',query:{id:item.id}})">
        <template #title>
          <van-tag type="danger" v-if="item.istop!=0">置顶</van-tag>
          <span class="custom-title">{{item.title}}</span>
        </template>
      </van-cell>
    </van-list>
    <empty description="暂无内容" v-if="listData.length == 0"></empty>
  </div>
</template>
  <script>
import { Icon, List, Cell, Tag } from 'vant';
import utils from '@/utils/utils';
export default {
  components: { [Icon.name]: Icon, [Cell.name]: Cell, [Tag.name]: Tag,[List.name]: List },
  data() {
    return {
      refreshDisabled: false,
      showImg: false,
      loading: false,
      active: 0,
      finished: true,
      wxReadyOk: false,
      menuId: 3,
      baseUrl: this.$API.ASSET_IMAGES_URL,
      query: {
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      allTotal: 0,
      notTotal: 0,
      doneTotal: 0,
      listData: [],
      certificate: ''
    };
  },
  filters: {
    dateFrom(e) {
      if (!e) return '';
      return utils.dateFormat(e, null,true);
    }
  },
  mounted() {
    this.initAjaxMethod();
  },
  methods: {
    //列表加载
    initAjaxMethod() {
      const toast = this.$toast.loading('加载中...');
      this.$http
        .post(this.$API.SET_PEROFFICE_NOTELIST, {
          page: this.query.pageIndex,
          pageSize: this.query.pageSize
        })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            let list = Array.isArray(res.data.list) ? res.data.list : [];
            let isOver = list.length < this.query.pageSize ? true : false;
            this.finished = isOver;
            this.loading = false;
            this.listData = this.query.pageIndex == 1 ? list : [...this.listData, ...list];
            this.total = res.data.total;
            if (!isOver) {
              this.query.pageIndex++;
            }
          }
        });
    },
  }
};
  </script>
  
  <style lang="less">
.notice-container {
  .custom-title{
    padding-left:0.1rem;
  }
  .van-cell__title{
    display: flex;
    align-items: center;
  }
  .custom-title,.van-cell__value{
    font-size:0.3rem;
  }
}
</style>
  